<template>

    <div class="bigBox">
        <!-- 头部和轮播图 -->
        <div class="top">
            <!-- 导航 -->
            <van-nav-bar title="选择咖啡和小食" />
            <!-- 轮播图 -->
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item v-for="item in swiperList" :key="item.img">
                    <img :src="item.banner" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 菜单商品列表 -->
        <selectGoodsVue></selectGoodsVue>
    </div>
    <Footer></Footer>

</template>


<script setup>
import { ref, onMounted } from 'vue';
import { getSwiper } from '@/api/api'
// 引入菜单商品列表组件
import selectGoodsVue from '../../components/goodsList/selectGoods.vue';
// 引入底部导航栏
import Footer from '@/components/home/footer/Footer.vue'

// 获取轮播图
const swiperList = ref([])
onMounted(async () => {
    let { data } = await getSwiper()
    // console.log(res);
    swiperList.value = data
})

</script>

<style lang="scss" scoped>
.bigBox {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: #fff;

    .top {
        width: 100%;
        height: 220px;
        background-color: #fff;

        .my-swipe .van-swipe-item {
            color: #fff;
            font-size: 20px;
            // line-height: 150px;
            text-align: center;
            // background-color: #39a9ed;

            img {
                width: 350px;
                height: 150px;
            }
        }
    }

}


</style>